<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>确&emsp;认:</lable>
            <input type="text" class="repwd">
            <span class="repwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>验证码:</lable>
            <input type="text" class="code">
            <span class="createCode">xy1d</span>
            <span class="code_tips"></span>
        </div>

        <div class="input-group">
            <input type="submit" class="btn" value="验证">
        </div>
    </div>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
    
    // 密码
    // 由数字 字母 _ 组成, 6-12位 
    // 密码强度
    // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
    // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

    // 提升:  true + true + true + false = 3 

    // 确认密码 -> 密码成功的前提下,和密码保持一致

    // 验证码:  随机的验证码 和 用户输入的保持一直

    // 随机验证码
    // 随机验证码  => 从数字 大小写字母  中随机四位验证码  (不强制要求 a. 没有重复  b.数字 大写 小写 都要出现至少依次   )
    // 1. 页面加载时 => 随机验证码
    // 2. 点击切换验证码

</script>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位
    // b. 切不能以数字开头
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符


    // 1. 获取元素
    // 通过class名获取元素,并取出数组中的第一个
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];
    
    var repwdInp = document.getElementsByClassName("repwd")[0];
    var repwdTips = document.getElementsByClassName("repwd_tips")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeTips = document.getElementsByClassName("code_tips")[0];
    
    var createCodeSpan = document.getElementsByClassName("createCode")[0];

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);



    var numList = [];
    for (var i = 48; i <= 57; i++) {
        var char = String.fromCharCode(i);
        numList.push(char);
    }

    var bigList = [];
    for (var i = 65; i <= 90; i++) {
        var char = String.fromCharCode(i);
        bigList.push(char);
    }

    var smallList = [];
    for (var i = 97; i <= 122; i++) {
        var char = String.fromCharCode(i);
        smallList.push(char);
    }

    var speList = ["_"]; //允许使用的特殊字符

    var normalList = numList.concat(bigList, smallList, speList);
    console.log(normalList);

    // if(true){
    //     console.log(1);
    // }else{
    //     console.log(2);
    // }

    // if(false)  console.log(1);
    // else console.log(2);

    /* function randCode(len){
        if(len==undefined) len = 4;  //不传参
        if(len < 4) len = 4;
        var codeList = numList.concat(bigList,smallList);
        var arr = [];
        for(var i = 0; i < len; i++){  // 加入i=2时重复
            // var index = Math.round(Math.random()*(codeList.length-1));  //下标的最大值 = length-1
            var index = Math.floor(Math.random()*codeList.length);  //下标的最大值 = length-1
            var code = codeList[index];
            if(!arr.includes(code)){  // 新数组中没有就放置
                arr.push(code)
            }else{ // 已存在
                console.log(code+"已存在",arr);
                i--; // i-- => 1   本次循环结束 i++  => 2 (本次不算)
            }
        }
        // console.log(arr);
        return arr;
    } */

    /* function randCode(len){
        if(len==undefined) len = 4;  //不传参
        if(len < 4) len = 4;
        var codeList = numList.concat(bigList,smallList);
        var arr = [];
        while(true){
            // var index = Math.round(Math.random()*(codeList.length-1));  //下标的最大值 = length-1
            var index = Math.floor(Math.random()*codeList.length);  //下标的最大值 = length-1
            var code = codeList[index];
            if(!arr.includes(code)){  // 新数组中没有就放置
                arr.push(code)
            }
            if(arr.length==len){  //什么时候数组有四个=> 跳出
                break;
            }
        }
        // console.log(arr);
        return arr;
    } */


    /* function randCode(len){ //4 
        if(len==undefined) len = 4;  //不传参
        if(len < 4) len = 4;
        var codeList = numList.concat(bigList,smallList);
        var arr = [];
        for(var i = 0; i < len; i++){  // 加入i=2时重复
            // var index = Math.round(Math.random()*(codeList.length-1));  //下标的最大值 = length-1
            var index = Math.floor(Math.random()*codeList.length);  //下标的最大值 = length-1
            var code = codeList[index];
            if(!arr.includes(code)){  // 新数组中没有就放置
                arr.push(code)
            }else{ // 已存在
                console.log(code+"已存在","送一次");
                len ++;  // 重复 => 送一次
            }
        }
        // console.log(arr);
        return arr;
    }
 */

    // 2. 绑定点击事件
    btn.onclick = function () {

        // 3. 取值
        var user = userInp.value;
        console.log(user);

        // 4. 验证
        // a.6-12位
        if (user.length >= 6 && user.length <= 12) {
            console.log("len ok!");

            // b.不能以数字开头

            // b1. 获取第一个字符对应的编码
            // var firstCharCode = user.charCodeAt(0); // 下标为0的字符对应的编码
            // if (!(firstCharCode >= 48 && firstCharCode <= 57)) { // 非数字
            //     console.log("开头 ok!");

            // } else {
            //     userTips.innerText = "用户名不能以数字开头";
            //     userTips.style.color = "red";
            //     userTips.style.fontSize = "12px";
            // }

            // b2. 获取第一个字符 => 判断是否是数字(isNaN)
            // isNaN() 判断传入的参数是否是非数字   是非数字 => true  是数字返回false

            var firstChar = user.charAt(0);
            if (isNaN(firstChar)) {
                console.log("开头 ok!");

                // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符

                var flag = true; // 假设所有的字符都在合法范围内(由数字 字母 _ 组成)
                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i);

                    if (normalList.indexOf(char) == -1) { // 有一个不满足条件(存在非法字符) -> 推翻假设
                        flag = false;
                        break;
                    }
                }

                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.color = "green";
                    userTips.style.fontSize = "12px";
                } else {
                    userTips.innerText = "用户名由数字、字母、下划线组成";
                    userTips.style.color = "red";
                    userTips.style.fontSize = "12px";
                }


            } else {
                userTips.innerText = "用户名不能以数字开头";
                userTips.style.color = "red";
                userTips.style.fontSize = "12px";
            }

        } else {
            userTips.innerText = "用户名需要在6-12位之间";
            userTips.style.color = "red";
            userTips.style.fontSize = "12px";

            // border-left;
            // background-color
            // text-indent
            // font-size
        }

        // ----------------------------------------------------
        
        var pwd = pwdInp.value;
        var isPwdOk = false; // 密码格式是否正确 (false)

        if(pwd.length>=6 && pwd.length <= 12){
            console.log("pwd len Ok");

            var flag = true; // 假设所有的字符都在合法范围内(由数字 字母 _ 组成)
            for (var i = 0; i < pwd.length; i++) {
                var char = pwd.charAt(i);

                if (normalList.indexOf(char) == -1) { // 有一个不满足条件(存在非法字符) -> 推翻假设
                    flag = false;
                    break;
                }
            }

            if (flag) { // 格式正确
                // pwdTips.innerText = "√";
                // pwdTips.style.color = "green";
                // pwdTips.style.fontSize = "12px";


                // 密码强度
                // 输入的密码中 是否存在数字 大写 小写 _
                // var isExistNum = false;
                // var isExistBig = false;
                // var isExistSmall = false;
                // var isExistSpe = false;

                var isExist = {
                    num:false,
                    big:false,
                    small:false,
                    spe:false,
                }

                for(var char of pwd){ //遍历pwd 获取每个字符
                    if(numList.includes(char)){ // 如果在numList中存在 => 是数字
                        isExist.num = true;
                        continue;
                    }

                    if(bigList.includes(char)){
                        isExist.big = true;
                        continue;
                    }

                    if(smallList.includes(char)){
                        isExist.small = true;
                        continue;
                    }

                    if(speList.includes(char)){
                        isExist.spe = true;
                        continue;
                    }
                }

                var level = 0;
                for(var key in isExist){
                    var val = isExist[key];
                    level += val;
                }
                // console.log("等级",level);

                switch(level){
                    case 1:   pwdTips.innerText = "密码强度:弱"; break;
                    case 2:   pwdTips.innerText = "密码强度:中"; break;
                    case 3:   pwdTips.innerText = "密码强度:强"; break;
                    case 4:   pwdTips.innerText = "密码强度:超强"; break;
                }
     
                pwdTips.style.color = "green";
                pwdTips.style.fontSize = "12px";

                isPwdOk = true;

            } else {
                pwdTips.innerText = "密码由数字、字母、下划线组成";
                pwdTips.style.color = "red";
                pwdTips.style.fontSize = "12px";
            }


        }else{
            pwdTips.innerText = "密码需要在6-12位之间";
            pwdTips.style.color = "red";
            pwdTips.style.fontSize = "12px";
        }


        // 确认密码
        var repwd = repwdInp.value;
        if(isPwdOk){
            if(pwd===repwd){
                repwdTips.innerText = "√";
                repwdTips.style.color = "green";
                repwdTips.style.fontSize = "12px";
            }else{
                repwdTips.innerText = "两次密码输入不一致!";
                repwdTips.style.color = "red";
                repwdTips.style.fontSize = "12px";
            }
        }else{
            repwdTips.innerText = "密码格式有误,请先修改密码!";
            repwdTips.style.color = "red";
            repwdTips.style.fontSize = "12px";
        }




    }

</script>

</html>